<template>
    <div class="markdown-content" v-html="parsedContent"></div>
  </template>
  
  <script setup>
  import { marked } from 'marked'
  import hljs from 'highlight.js'
  import 'highlight.js/styles/github-dark.css'
  import { computed } from 'vue'
  const props = defineProps({
    content: {
      type: String,
      default: ''
    }
  })
  
  // 配置marked
  marked.setOptions({
    highlight: (code, lang) => {
      return hljs.highlightAuto(code).value
    },
    breaks: true
  })
  
  const parsedContent = computed(() => marked(props.content))
  </script>
  
  <style scoped>
  .markdown-content {
    line-height: 1.8;
  
    h1, h2, h3 {
      margin: 1em 0;
      color: var(--el-text-color-primary);
    }
  
    pre {
      background-color: var(--el-bg-color-page);
      padding: 15px;
      border-radius: 8px;
      overflow-x: auto;
      margin: 15px 0;
    }
  
    code {
      font-family: 'Courier New', monospace;
    }
  
    blockquote {
      border-left: 4px solid var(--el-color-primary);
      padding-left: 1em;
      color: var(--el-text-color-secondary);
      margin: 1em 0;
    }
  }
  </style>